<template>

    <div class="organ-page page">
        <div class="banner" v-if="dataForm.banner!=''">
            <div v-if="index ==0" v-for="(i,index) in dataForm.banner.split(',')" class="banner-image"
                 :style="{backgroundImage: 'url(' + basefile+ i + ')' }">
            </div>
        </div>
        <div class="content organ-content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <span style="margin-left: 10px">机构详情</span>
                    <div class="organ-crumb-right">
                        <el-button type="danger" size="mini" @click="editData">编辑资料</el-button>
                    </div>
                </div>
            </PlatformCrumb>
            <div class="organ-group-con">
                <p class="organ-detail-title">{{dataForm.name}}</p>
                <img v-if="dataForm.homeImgs !=''" width="500" :src="dataForm.homeImgs|filtersImg"
                     style="margin:20px auto;display: block;"/>
                <div class="brief-introduction">
                    <div class="brief-title">{{dataForm.name}}简介</div>
                    <div class="brief-detail" v-html="dataForm.info">
                    </div>
                    <div class="brief-address">
                        <p>地址：{{dataForm.infoAddress}}</p>
                        <p>联系方式：{{dataForm.infoPhone}}</p>
                    </div>
                </div>
                <div class="brief-introduction wheel-planting">
                    <div class="brief-title">训练设施</div>
                    <div class="wheel-content">
                        <swiper :options="swiperOption">
                            <swiper-slide v-for="item in dataForm.trainingFacilities.split(',')">
                                <img width="150" height="150" :src="item|filtersImg" class="imgWidth">
                            </swiper-slide>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                </div>
                <div class="brief-introduction">
                    <div class="brief-title">训练视频</div>
                    <div class="platform-video2">
                        <video width="600" height="350" ref="myVideo" controls="controls"
                               :src="dataForm.trainingVideo|filtersImg"></video>
                        <!-- <div class="play" @click="videoPlay"><img src="/images/play_icon.png"></div> -->
                        <br>
                    </div>
                </div>
                <div class="brief-introduction">
                    <div class="brief-title">机构信息</div>
                    <div class="organization-content" v-html="dataForm.message">
                        <!-- <p>在招队伍：12-18青训队伍</p>
                        <p>联系邮箱：13585889223@163.com</p>
                        <p>地址：广东省深圳市龙岗区大运体育中心207</p> -->
                    </div>
                </div>
                <div class="brief-introduction wheel-planting">
                    <div class="brief-title">机构课程</div>
                    <div class="wheel-content">
                        <swiper :options="swiperOption">
                            <swiper-slide v-for="i in dataForm.courses.split(',')">
                                <img width="150" height="150" :src="i|filtersImg" class="imgWidth">
                                <!-- <p style="width:100%;text-align:center;">{{item.name}}</p> -->
                            </swiper-slide>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                </div>
                <div class="brief-introduction wheel-planting">
                    <div class="brief-title">教练团队</div>
                    <div class="wheel-content">
                        <swiper :options="swiperOption">
                            <swiper-slide v-for="i in dataForm.teams.split(',')">
                                <img width="150" height="150" :src="i|filtersImg" class="imgWidth">
                                <!-- <p style="width:100%;text-align:center;">{{item.name}}</p> -->
                            </swiper-slide>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                </div>
                <div class="brief-introduction wheel-planting">
                    <div class="brief-title">赛事荣誉</div>
                    <div class="wheel-content">
                        <swiper :options="swiperOption">
                            <swiper-slide v-for="i in dataForm.matchs.split(',')">
                                <img width="150" height="150" :src="i|filtersImg" class="imgWidth">
                                <!-- <p style="width:100%;text-align:center;">{{item.name}}</p> -->
                            </swiper-slide>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                </div>


            </div>

        </div>
    </div>

</template>

<script>

    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {mapActions, mapState} from 'vuex'
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                key: "value",
                banner: [],
                dataForm: {
                    banner: '',
                    courses: "",
                    teams: "",
                    trainingFacilities: "",
                    matchs: "",
                },
                basefile: basefile,
                swiperOption: {
                    speed: 1000,
                    slidesPerView: 5,
                    spaceBetween: 80,

                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },

            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ])
        },

        methods: {
            ...mapActions('organ', [
                'wodejianjie'
            ]),

            editData() {
                this.$router.push('/organ/edit')
            },
            videoPlay() {
                this.$refs.myVideo.play();
            },
            getData() {
                let id = Number(this.userStatus.statusId)
                this.wodejianjie({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.dataForm = data
                    }
                })
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
        created() {
            this.getData()
        },
    }
</script>

<style scoped>

    @import url("porgan.css");

    .brief-detail img {
        border: 1px solid #f00;
        width: 100%;
    }

    .platform-video2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
